<template>
  <div class="flex flex-col min-h-screen">
    <Header></Header>

    <div class="container flex-grow mx-auto max-w-screen-xl mt-5 font-mi">
      <div class="grid grid-cols-4">
        <!-- 左边栏 -->
        <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
          <div
            class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">
              <svg t="1698998570037" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="21572" width="200" height="200">
                  <path
                    d="M938.666667 464.592593h-853.333334v-265.481482c0-62.577778 51.2-113.777778 113.777778-113.777778h128.948148c15.17037 0 28.444444 3.792593 41.718519 11.377778l98.607407 64.474074h356.503704c62.577778 0 113.777778 51.2 113.777778 113.777778v189.62963z"
                    fill="#3A69DD" p-id="21573"></path>
                  <path
                    d="M805.925926 398.222222h-587.851852v-125.155555c0-24.651852 20.859259-45.511111 45.511111-45.511111h496.82963c24.651852 0 45.511111 20.859259 45.511111 45.511111V398.222222z"
                    fill="#D9E3FF" p-id="21574"></path>
                  <path
                    d="M843.851852 417.185185h-663.703704v-98.607407c0-28.444444 22.755556-53.096296 53.096296-53.096297h559.407408c28.444444 0 53.096296 22.755556 53.096296 53.096297V417.185185z"
                    fill="#FFFFFF" p-id="21575"></path>
                  <path
                    d="M786.962963 938.666667h-549.925926c-83.437037 0-151.703704-68.266667-151.703704-151.703704V341.333333s316.681481 37.925926 430.45926 37.925926c189.62963 0 422.874074-37.925926 422.874074-37.925926v445.62963c0 83.437037-68.266667 151.703704-151.703704 151.703704z"
                    fill="#5F7CF9" p-id="21576"></path>
                  <path
                    d="M559.407407 512h-75.851851c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h75.851851c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-37.925926 37.925926z"
                    fill="#F9D523" p-id="21577"></path>
                </svg>
              分类
            </h2>

            <!-- <div
          class="text-base font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories" :key="index"
            class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
            <svg t="1731375404658" class="icon w-4 h-4 mr-2 mb-2px text-gray-800 inline dark:text-white"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17301" width="48"
              height="48">
              <path
                d="M813.2096 901.5808H218.3168c-68.3008 0-123.6992-55.3984-123.6992-123.6992V648.704h842.24v129.1264c0 68.352-55.3472 123.7504-123.648 123.7504z"
                fill="#ffa115" p-id="17302"></path>
              <path
                d="M857.1904 286.1568v-3.7888c0-75.8272-61.6448-137.472-137.472-137.472H472.832c-0.6144 0-1.1776 0.0512-1.792 0.1024-25.5488-27.136-61.3888-43.008-99.9424-43.008H201.3696c-75.8272 0-137.472 61.6448-137.472 137.472v555.3664c0 75.8272 61.6448 137.472 137.472 137.472h628.736c75.8272 0 137.472-61.6448 137.472-137.472V420.9152c0-66.5088-47.5136-122.1632-110.3872-134.7584z m-61.44-3.7888v1.0752h-200.7552c-28.5184 0-54.3744-15.7184-67.5328-41.0624l-18.688-36.0448h210.944c41.9328 0 76.032 34.0992 76.032 76.032z m110.3872 512.4096c0 41.9328-34.0992 76.032-76.032 76.032H201.3696c-41.9328 0-76.032-34.0992-76.032-76.032V239.4624c0-41.9328 34.0992-76.032 76.032-76.032h169.728c28.5184 0 54.3744 15.7184 67.5328 41.0624l34.304 66.2016a137.02144 137.02144 0 0 0 122.0608 74.24h235.1104c41.9328 0 76.032 34.0992 76.032 76.032v373.8112z"
                fill="#474A54" p-id="17303"></path>
            </svg>

            {{ item.name }}
          </a>
        </div> -->

            <!-- 分类列表 -->
            <div
              class="text-sm flex flex-wrap gap-3 pt-2 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
              <a @click="goCatagoryArticleListPage(category.id, category.name)" v-for="(category, index) in categories"
                :key="index"
                class="cursor-pointer inline-flex items-center px-4 py-2 text-sm font-medium text-center border rounded-lg 
            hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 
            dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
                {{ category.name }}
                <span
                  class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                  {{ category.articlesTotal }}
                </span>
              </a>
            </div>

          </div>
        </div>
        <!-- 右边栏 -->
        <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
          <UserInfoCard></UserInfoCard>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>

</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRouter } from 'vue-router'
import { getCategories } from '@/api/frontend/category'
import { ref } from 'vue'

const router = useRouter()

const goCatagoryArticleListPage = (id, name) => {
  router.push({ path: '/category/article/list', query: { id: id, name: name } })
}

const categories = ref([])
getCategories().then((e) => {
  if (e.success) {
    categories.value = e.data
  }
})


</script>
